<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 网站的图标 -->
    <link rel="icon" href="../favicon.ico">
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
    
</head>
<body>
    <!-- 
        初识Vue
            1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
            2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
            3、root容器里的代码被称为【Vue模板】
            4、vue实例与容器是一一对应的关系，一个vue实例只为一个容器服务
            5、真实开发中只有一个Vue实例，并且会配合着组件一起使用
            6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
            7、一旦data中的数据发生变化，那么页面中用到该数据的地方也会自动更新

        js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
     -->
    <!-- 创建一个容器 -->
    <div id="container">
        <h1>hello {{name}},{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;    //阻止vue在启动时生成生产提示
        // 创建vue实例，往里传一个参数，参数类型为对象
        const x = new Vue({
            el:'#container',     //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            data:{  //data中用于存储数据，数据供el所指定的容器去使用。值我们暂时先写成一个对象
                name:'world',
                address:'武汉'
            }
        });
    </script>
    <!-- 
        MVVM模型：
            1、M：模型(Model):  data中的数据
            2、V：视图(View):   模板代码
            3、VM：视图模型(ViewModel): Vue实例
        观察发现：
            1、data中所有的属性，最后都出现在了vm上
            2、vm上的所有属性，及Vue原型上的所有属性，在Vue模板中都可以直接使用
     -->
</body>
</html>